import DocumentTitle from 'react-document-title'
import { Flex, InputItem, Button } from 'antd-mobile'
import { Form, Checkbox } from 'antd'
import { connect } from 'dva'
import styles from './index.scss'
import ReactSVG from 'react-svg'
import TipModal from '../../components/Modal'
const FormItem = Form.Item
const Login = ({
  dispatch,
  form: { validateFields, getFieldDecorator, isFieldTouched },
  content,
  modalControl
}) => {
  // 定义一个函数用来接受用户输入的错误 并且输入框是启用的 isuse
  let isUse =
    isFieldTouched('userName') && isFieldTouched('password') ? true : false
  const hasErrors = () => {
    // 如果用户没用输入内容 禁止button
    if (!isUse) {
      return true
    }
    // return Object.keys(fieldsError).some(field => fieldsError[field])
  }
  // 定义弹窗样式
  const modalData = {
    content,
    modalControl,
    closeModal: () => {
      dispatch({
        type: 'login/changeModal',
        payload: {
          modalControl:false
        }
      })
    }
  }
  const submit = () => {
    validateFields((error, value) => {
      if (!error) {
        console.log(value)
        dispatch({
          type: 'login/login',
          payload: value
        })
      } else {
        console.log(error)
        if (error.password) {
          dispatch({
            type: 'login/changeModal',
            payload: {
              modalControl:true,
              content: '请输入6位交易密码'
            }
          })
        } else if (error.userName) {
          dispatch({
            type: 'login/changeModal',
            payload: {
              modalControl:true,
              content: '请输入10或12位长度的资金账号'
            }
          })
        }
      }
    })
  }
  return (
    <DocumentTitle title="登录">
      <div className={styles.loginContainer}>
        <Flex justify="center" className={styles.logoSize} />
        <Flex className={styles.formContainer} justify="center">
          <Form onSubmit={submit}>
            <FormItem>
              {getFieldDecorator('userName', {
                rules: [
                  { required: true, message: '请输入资金账号!' },
                  {
                    pattern: /^(\d{10}|\d{12})$/,
                    message: '请输入正确的资金账号'
                  }
                ]
              })(
                <InputItem clear placeholder="请输入资金账号" type="number">
                  <ReactSVG
                    svgClassName={styles.svgSize}
                    src="svg/login/user.svg"
                  />
                </InputItem>
              )}
            </FormItem>
            <FormItem>
              {getFieldDecorator('password', {
                rules: [
                  { required: true, message: '请输入交易密码！' },
                  { pattern: /^(\d{6})$/, message: '请输入正确的交易密码' }
                ]
              })(
                <InputItem clear type="password" placeholder="请输入交易密码">
                  <ReactSVG
                    svgClassName={styles.svgSize}
                    src="svg/login/pwd.svg"
                  />
                </InputItem>
              )}
            </FormItem>
            <FormItem>
              {getFieldDecorator('rememberWechat', {
                valuePropName: 'checked',
                initialValue: true
              })(<Checkbox>微信绑定&nbsp;&nbsp;(jackwu)</Checkbox>)}
            </FormItem>
            <FormItem>
              <Button type="primary" disabled={hasErrors()} onClick={submit}>
                登录
              </Button>
            </FormItem>
          </Form>
        </Flex>
      <TipModal {...modalData}></TipModal>
      </div>
    </DocumentTitle>
  )
}
const WrappedLogin = Form.create()(Login)
export default connect(state => state.login)(WrappedLogin)
